<template>
  <div class="register">
    <div class="register__title">注册</div>
    <div class="register__form">
      <el-form :model="register" :rules="rules" ref="register">
        <el-form-item prop="email-tip" class="email-tip">
          请输入您的账户信息：
        </el-form-item>
        <el-form-item prop="email">
          <el-input type="text" v-model="register.email"  placeholder="请输入账户"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="register.password" placeholder="请输入密码"></el-input>
        </el-form-item>

        <el-form-item prop="message-tip" class="message-tip">
          请输入您的基本信息：
        </el-form-item>
        <el-form-item prop="corp_id">
          <el-input type="text" v-model="register.corp_id" placeholder="请输入企业ID"></el-input>
        </el-form-item>
        <el-form-item prop="source" style="text-align:left">
          <el-select v-model="register.source" placeholder="请选择用户来源">
            <el-option 
              v-for="(item, index) in SOURCE" 
              :label="item.label"
              :value="item.value"
              :key="index" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="sumbit">
          <el-button type="danger" @click="submitForm" class="login-submit" >{{submiting ? "...注册中" : '注册'}}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import api from '@/api'
export default {
  name: 'register',
  data () {
    const SOURCE = [
      {
        value: '1',
        label: 'Web'
      },
      {
        value: '2',
        label: 'Android客户端'
      },
      {
        value: '3',
        label: 'IOS客户端'
      },
      {
        value: '4',
        label: '微信客户端'
      },
      {
        value: '5',
        label: 'QQ用户'
      },
      {
        value: '6',
        label: '微博用户'
      },
      {
        value: '10',
        label: '其它遵循xlink统一身份认证规范的用户来源'
      }
    ]
    return {
      SOURCE,
      submiting: false,
      register: {
        email: '',
        password: '',
        corp_id: '',
        source: '1'
      },
      rules: {
        email: [
          { required: true, message: '请输入登录帐号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        corp_id: [
          { required: true, message: '请输入企业ID', trigger: 'blur' }
        ],
        source: [
          { required: true, message: '请输入用户来源', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    submitForm () {
      if (this.submiting) return
      this.$refs.register.validate(async (valid) => {
        if (valid) {
          this.submiting = true
          try {
            let res = await api.email_register(this.register)
            if (res.status) {
              this.$message({
                message: '恭喜你，注册成功',
                type: 'success'
              })
              setTimeout(() => {
                this.$router.push('./login')
              }, 1000)
            }
          } catch (err) {
            this.submiting = false
            this.$message({
              message: err.response.data.error.msg,
              type: 'error'
            })
          }
        }
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
.register 
  width 500px
  border 1px solid #eee
  border-radius 12px
  margin 100px auto 1000px
  padding-bottom 20px
  box-shadow: 0 3px 6px rgba(0,0,0,.15)
  &__title
    font-size: 20px;
    margin 30px 0 25px
  &__form
    box-sizing border-box
    padding 0 80px
    .email-tip
      text-align left
    .message-tip
      text-align left
    .login-submit
      width 260px
      margin-top 5px
      border-radius 12px
    .register-wrap
      a
        color #a5a4a4
        text-decoration none
</style>
